<template>
    <div class='login'>
        <div class="mask">
            <div class="imgbox">
                <img src="../assets/logo.png">
            </div>
            <div>
       <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 登录
    submitForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$store.dispatch("user/loginFn",this.ruleForm).then(()=>{
            this.$router.push('/home');
          },
          ()=>{
            this.resetForm("ruleForm");
          })
        }else{
          this.resetForm("ruleForm");
          return false;
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang='scss' scoped>
.login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #2b4b6b;
    display: flex;
    justify-content: center;
    align-items: center;
    .mask {
        width: 400px;
        min-width: 400px;
        background: #fff;
        position: relative;
        padding: 100px 20px 0 20px;

        .imgbox {
            z-index: 99;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            top: -70px;
            left: 50%;
            transform: translate(-50%, 0);
            background-color: #eee;
            img {
                width: 120px;
                height: 120px;
            }
        }

        .btnbox {
            float: right;
        }
    }
}
</style>
